<template>
  <HeadContainer
    class="mine-purchases bg-background"
    :title="$t('info.creditCard.info')"
    @back="emits('toPage', 2, 'purchases')"
  >
    <!-- 卡片列表 -->
    <div v-if="creditCardList.length > 0">
      <div class="gap-col-8">
        <div class="font-size-14 font-weight-500">{{ $t('info.creditCardAdded') }} {{ creditCardList.length }}/5</div>
        <Card
          v-for="(card, index) in creditCardList"
          :key="`credit-card-${index}`"
          :card="card"
          :selected="card.id === defaultCard.id"
          :clickable="creditCardList.length > 1"
          :removable="creditCardList.length > 0"
          :disabled="card.is_ban"
          @remove="removeCard(index, card.id)"
          @click="onSelectCard(card)"
        />
      </div>
    </div>

    <!-- 新增卡片 -->
    <div v-if="creditCardList.length < 5" class="mt-2">
      <div class="list d-flex justify-space-between align-center pointer" @click="openAddCreditCard">
        <div class="font-size-14 font-weight-500">{{ $t('info.creditCard.add') }}</div>
        <Icon name="add" size="16"></Icon>
      </div>
    </div>
  </HeadContainer>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useCreditCardStore } from '@/store/credit-card'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import Card from '@/components/payment/Card.vue'
import { POPUP_DIALOG_TYPE } from '@/constant'
import API from '@/http'

const creditCardStore = useCreditCardStore()
const { creditCardList, defaultCard } = storeToRefs(creditCardStore)
const { onSelectCard } = creditCardStore
const { $confirm, $popupDialog } = usePopupDialogStore()

// 豆腐提醒：「已綁卡付款流程」>「選擇支付方式-銀行卡(已有保存卡)」時，返回上一步要注意回到原本的支付彈窗
const emits = defineEmits(['toPage'])

const openAddCreditCard = () => {
  $popupDialog(POPUP_DIALOG_TYPE.CREDIT_CARD, {
    title: $t('info.creditCard.add'),
    confirm: () => {},
    cancel: () => {},
  }).open()
}

const showConfirmDialog = (index, isDelete, id) => {
  $confirm({
    title: $t('title.reconfirm'),
    content: $t('content.creditCard.sureToDelete', {
      creditCard: `**** **** **** ${creditCardList.value[index].card.last4}`,
    }),
    showClose: false,
    confirm: async () => {
      console.log('你誰', id)
      console.log('你是最後一張卡片嗎？', creditCardList.value.length)
      try {
        const data = { payment_method_id: id }
        await API.Payment.delPaymentMethod({ data })

        if (isDelete) {
          creditCardList.value.splice(index, 1)
          defaultCard.value = creditCardList.value[0]
        } else {
          creditCardList.value.splice(index, 1)
        }

        if (creditCardList.value.length === 0) {
          emits('toPage', 2, 'purchases')
        }
      } catch (e) {
        console.error(e)
      }
    },
    cancel: () => {},
  }).open()
}

const removeCard = (index, id) => {
  if (defaultCard.value === creditCardList.value[index]) {
    showConfirmDialog(index, true, id) // 是預設卡片
  } else {
    showConfirmDialog(index, false, id) // 不是預設卡片
  }
}
</script>
<style lang="scss" scoped>
.list {
  border-radius: 0.625rem;
  padding: 0.625rem 1rem;
  background: rgb(var(--v-theme-surface));
  width: 100%;
  border: 0.09375rem solid rgb(var(--v-theme-surface));
}
</style>
